// 温馨提示内容数组（从1.txt文件动态加载）
// 注意：messages 变量已在 messages.js 中声明，这里不再重复声明
const cardsWrapper = document.getElementById('cardsWrapper');

// 从API获取消息
async function loadMessages() {
    // 首先检查是否有 messages.js（直接打开文件时使用）
    if (typeof messages !== 'undefined' && Array.isArray(messages) && messages.length > 0) {
        console.log('✅ 从 messages.js 加载消息，数量:', messages.length);
        console.log('前3条消息:', messages.slice(0, 3));
        return messages;
    }
    
    // 否则尝试从API获取（通过服务器访问时使用）
    try {
        const response = await fetch('/api/messages');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        // 将 API 返回的数据赋值给全局 messages 变量
        if (typeof messages === 'undefined') {
            window.messages = data.messages;
        } else {
            // 如果 messages 已经存在（从 messages.js），清空并重新赋值
            messages.length = 0;
            messages.push(...data.messages);
        }
        console.log('✅ 从API加载消息，数量:', messages.length);
        return messages;
    } catch (error) {
        console.error('❌ 加载消息失败:', error);
        // 如果加载失败，使用默认消息
        const defaultMessages = [
            "保持微笑呀",
            "期待下一次见面",
            "早点休息",
            "今天也要好好爱自己"
        ];
        if (typeof messages === 'undefined') {
            window.messages = defaultMessages;
        } else {
            messages.length = 0;
            messages.push(...defaultMessages);
        }
        return messages;
    }
}

// 检测是否为移动设备（增强版）
function isMobile() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
    const isMobileWidth = window.innerWidth <= 768;
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    
    return isMobileDevice || (isMobileWidth && isTouchDevice);
}

// 获取设备像素比，用于性能优化
function getDevicePixelRatio() {
    return window.devicePixelRatio || 1;
}

// 检测是否为低端设备
function isLowEndDevice() {
    const cores = navigator.hardwareConcurrency || 4;
    const memory = navigator.deviceMemory || 4;
    return cores < 4 || memory < 4;
}

// 生成爱心形状的坐标点（优化移动端显示，避开背景中心）
function generateHeartPositions(count) {
    const positions = [];
    const mobile = isMobile();
    
    // 移动端使用更精确的视口计算
    const viewportWidth = mobile ? window.innerWidth : window.innerWidth;
    const viewportHeight = mobile ? window.innerHeight : window.innerHeight;
    const centerX = viewportWidth / 2;
    
    // 爱心垂直位置调整 - 向上移动以避开背景中心
    // PC端向上移动更多，移动端适度上移
    let verticalOffset;
    if (mobile) {
        // 移动端根据屏幕高度动态调整
        if (window.innerWidth <= 480) {
            verticalOffset = -viewportHeight * 0.15; // 小屏上移15%
        } else {
            verticalOffset = -viewportHeight * 0.18; // 中屏上移18%
        }
    } else {
        // PC端向上移动更多，让背景中心区域更明显
        verticalOffset = -viewportHeight * 0.22; // PC端上移22%
    }
    
    const centerY = viewportHeight / 2 + verticalOffset;
    
    // 根据设备和屏幕大小调整爱心尺寸
    let scale;
    if (mobile) {
        // 移动端根据屏幕方向和尺寸动态调整
        const isLandscape = viewportWidth > viewportHeight;
        const minDimension = Math.min(viewportWidth, viewportHeight);
        
        if (window.innerWidth <= 480) {
            // 小屏手机
            scale = minDimension * (isLandscape ? 0.35 : 0.38);
        } else {
            // 平板或大屏手机
            scale = minDimension * (isLandscape ? 0.4 : 0.42);
        }
    } else {
        // PC端适当缩小爱心，让背景更突出
        scale = Math.min(viewportWidth, viewportHeight) * 0.45;
    }
    
    for (let i = 0; i < count; i++) {
        const t = (i / count) * Math.PI * 2;
        
        // 爱心参数方程
        const x = 16 * Math.pow(Math.sin(t), 3);
        const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        
        // 根据设备性能调整随机偏移
        const offsetRange = mobile ? (isLowEndDevice() ? 15 : 20) : 30;
        const offsetX = (Math.random() - 0.5) * offsetRange;
        const offsetY = (Math.random() - 0.5) * offsetRange;
        
        // 根据屏幕尺寸调整卡片宽度偏移
        const cardWidthOffset = mobile ? (window.innerWidth <= 480 ? 70 : 80) : 140;
        
        positions.push({
            x: centerX + x * scale / 20 + offsetX - cardWidthOffset,
            y: centerY + y * scale / 20 + offsetY
        });
    }
    
    return positions;
}

// 存储已使用的位置，确保卡片不会太靠近
const usedPositions = [];

// 检查位置是否与已有位置冲突
function isPositionValid(x, y, minDistance) {
    for (const pos of usedPositions) {
        const distance = Math.sqrt(Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2));
        if (distance < minDistance) {
            return false;
        }
    }
    return true;
}

// 生成随机起始位置（在屏幕内的随机位置，极度分散）
function generateRandomStartPosition() {
    const mobile = isMobile();
    
    // 移动端使用更小的卡片尺寸和边距
    const cardWidth = mobile ? 160 : 280;
    const cardHeight = mobile ? 150 : 200;
    const padding = mobile ? 5 : 10;
    
    const maxWidth = window.innerWidth - cardWidth - padding * 2;
    const maxHeight = window.innerHeight - cardHeight - padding * 2;
    
    // 移动端使用更小的最小距离
    const minDistance = mobile ? 100 : 150;
    const fallbackDistance = mobile ? 50 : 80;
    
    let x, y;
    let attempts = 0;
    const maxAttempts = mobile ? 30 : 50; // 移动端减少尝试次数提升性能
    
    // 尝试找到一个不与其他卡片冲突的位置
    do {
        x = padding + Math.random() * maxWidth;
        y = padding + Math.random() * maxHeight;
        attempts++;
    } while (!isPositionValid(x, y, minDistance) && attempts < maxAttempts);
    
    // 如果经过多次尝试仍然冲突，减小最小距离要求
    if (attempts >= maxAttempts) {
        do {
            x = padding + Math.random() * maxWidth;
            y = padding + Math.random() * maxHeight;
            attempts++;
        } while (!isPositionValid(x, y, fallbackDistance) && attempts < maxAttempts * 2);
    }
    
    // 记录这个位置
    usedPositions.push({ x, y });
    
    return { x, y };
}

// 创建卡片
function createCard(message, index, finalPosition) {
    const card = document.createElement('div');
    card.className = `card color-${(index % 8) + 1}`;
    
    // 获取随机起始位置（在屏幕内）
    const startPos = generateRandomStartPosition();
    
    // 设置初始位置（在随机位置，但是很小且模糊）
    card.style.left = `${startPos.x}px`;
    card.style.top = `${startPos.y}px`;
    card.style.opacity = '0';
    card.style.transform = 'scale(0.1)';
    card.style.filter = 'blur(10px)';
    
    // 存储位置信息
    card.dataset.finalX = finalPosition.x;
    card.dataset.finalY = finalPosition.y;
    card.dataset.startX = startPos.x;
    card.dataset.startY = startPos.y;
    
    card.innerHTML = `
        <div class="card-body">
            <img src="images/tx.jpg" alt="爱吃烤冷面🍏" class="user-avatar">
            <div class="card-content">
                <div class="user-name">爱吃烤冷面🍏</div>
                <div class="card-text">${message}</div>
            </div>
        </div>
    `;
    
    return card;
}

// 两阶段动画（移动端性能优化）
function animateCard(card, delay) {
    const startX = parseFloat(card.dataset.startX);
    const startY = parseFloat(card.dataset.startY);
    const finalX = parseFloat(card.dataset.finalX);
    const finalY = parseFloat(card.dataset.finalY);
    
    const mobile = isMobile();
    const lowEnd = isLowEndDevice();
    
    // 低端设备使用更简短的动画时间
    const phase1Duration = lowEnd ? 0.5 : 0.8;
    const phase1Delay = lowEnd ? 600 : 1000;
    const phase2Duration = lowEnd ? 1.0 : 1.5;
    
    // 第一阶段：在随机位置由远到近、由小变大出现
    setTimeout(() => {
        // 移动端使用 transform 而不是多个属性，性能更好
        if (mobile) {
            card.style.transition = `all ${phase1Duration}s cubic-bezier(0.34, 1.56, 0.64, 1)`;
        } else {
            card.style.transition = `all ${phase1Duration}s cubic-bezier(0.34, 1.56, 0.64, 1)`;
        }
        card.style.opacity = '1';
        card.style.transform = 'scale(1)';
        card.style.filter = 'blur(0px)';
        
        // 第二阶段：移动到爱心位置
        setTimeout(() => {
            card.style.transition = `all ${phase2Duration}s cubic-bezier(0.4, 0, 0.2, 1)`;
            card.style.left = `${finalX}px`;
            card.style.top = `${finalY}px`;
        }, phase1Delay);
    }, delay);
}

// 初始化所有卡片
function initCards() {
    // 清空容器
    cardsWrapper.innerHTML = '';
    
    // 清空已使用位置记录
    usedPositions.length = 0;
    
    // 生成爱心位置
    const heartPositions = generateHeartPositions(messages.length);
    
    // 创建所有卡片
    messages.forEach((message, index) => {
        const card = createCard(message, index, heartPositions[index]);
        cardsWrapper.appendChild(card);
        
        // 延迟动画，每个卡片间隔200ms（0.2秒）显示
        animateCard(card, index * 200);
    });
}

// 响应式处理（移动端优化，防止频繁触发）
let resizeTimer;
let lastOrientation = window.orientation;

window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    
    // 移动端特殊处理：只在方向改变时重新初始化
    if (isMobile()) {
        const currentOrientation = window.orientation;
        if (currentOrientation !== lastOrientation) {
            lastOrientation = currentOrientation;
            resizeTimer = setTimeout(() => {
                initCards();
            }, 300);
        }
    } else {
        // PC端正常处理
        resizeTimer = setTimeout(() => {
            initCards();
        }, 250);
    }
});

// 监听屏幕方向变化（移动端）
if (window.screen && window.screen.orientation) {
    window.screen.orientation.addEventListener('change', () => {
        setTimeout(() => {
            initCards();
        }, 300);
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', async () => {
    // 先加载消息（但不显示卡片）
    await loadMessages();
    
    // 启动按钮交互
    const startButton = document.getElementById('startButton');
    const startScreen = document.getElementById('startScreen');
    const bgMusic = document.getElementById('bgMusic');
    
    startButton.addEventListener('click', () => {
        // 隐藏启动界面
        startScreen.classList.add('hidden');
        
        // 播放背景音乐
        if (bgMusic) {
            bgMusic.play().catch(error => {
                console.log('音乐播放失败:', error);
            });
        }
        
        // 延迟一点再显示卡片，让过渡更自然
        setTimeout(() => {
            initCards();
        }, 300);
    });
});

// 鼠标移动视差效果（在卡片到位后）
// 第一阶段：200ms * 80 = 16000ms
// 第二阶段延迟：1000ms
// 第二阶段动画：1500ms
// 总时间：16000 + 1000 + 1500 + 500(缓冲) = 19000ms
let isAnimationComplete = false;
setTimeout(() => {
    isAnimationComplete = true;
}, messages.length * 200 + 3000);

// 鼠标移动视差效果（仅在PC端启用）
document.addEventListener('mousemove', (e) => {
    if (isMobile() || !isAnimationComplete) return;
    
    const cards = document.querySelectorAll('.card');
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    
    const deltaX = (e.clientX - centerX) / centerX;
    const deltaY = (e.clientY - centerY) / centerY;
    
    cards.forEach((card, index) => {
        const finalX = parseFloat(card.dataset.finalX);
        const finalY = parseFloat(card.dataset.finalY);
        
        const depth = 10;
        const moveX = deltaX * depth;
        const moveY = deltaY * depth;
        
        card.style.left = `${finalX + moveX}px`;
        card.style.top = `${finalY + moveY}px`;
    });
});

// 移动端触摸优化 - 防止误触和改善交互
let touchStartTime = 0;
let touchStartX = 0;
let touchStartY = 0;

document.addEventListener('touchstart', (e) => {
    touchStartTime = Date.now();
    if (e.touches.length > 0) {
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
    }
}, { passive: true });

document.addEventListener('touchmove', (e) => {
    // 防止页面滚动时的卡片误触
    if (e.target.closest('.card')) {
        e.preventDefault();
    }
}, { passive: false });

document.addEventListener('touchend', (e) => {
    const touchDuration = Date.now() - touchStartTime;
    
    // 检测是否为滑动操作
    if (e.changedTouches.length > 0) {
        const touchEndX = e.changedTouches[0].clientX;
        const touchEndY = e.changedTouches[0].clientY;
        const deltaX = Math.abs(touchEndX - touchStartX);
        const deltaY = Math.abs(touchEndY - touchStartY);
        
        // 如果移动距离超过10px，视为滑动而非点击
        if (deltaX > 10 || deltaY > 10) {
            return;
        }
    }
    
    // 如果触摸时间很短，可能是误触（但不阻止，只记录）
    if (touchDuration < 50) {
        console.log('可能的误触');
    }
}, { passive: true });

// 移动端卡片点击反馈增强
if (isMobile()) {
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => {
                card.addEventListener('touchstart', function() {
                    this.style.transition = 'transform 0.1s ease';
                    this.style.transform = 'scale(0.95)';
                }, { passive: true });
                
                card.addEventListener('touchend', function() {
                    setTimeout(() => {
                        this.style.transition = 'transform 0.3s ease';
                        this.style.transform = 'scale(1)';
                    }, 100);
                }, { passive: true });
            });
        }, messages.length * 200 + 3000);
    });
}

// 移动端性能监控和优化
if (isMobile()) {
    // 节流函数
    function throttle(func, limit) {
        let inThrottle;
        return function() {
            const args = arguments;
            const context = this;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        };
    }
    
    // 监控页面性能
    window.addEventListener('load', () => {
        if (window.performance && window.performance.timing) {
            const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
            console.log(`页面加载时间: ${loadTime}ms`);
            
            // 如果加载时间过长，记录警告
            if (loadTime > 3000) {
                console.warn('页面加载较慢，可能需要优化');
            }
        }
    });
}

